<template>
	<view class="page">		
		 <!-- <view > -->
			 <div class="topBox">
				 <image class="left" src="/static/image/home/logo.png" mode=""></image>
				<div class="right">
					<image src="/static/image/home/zhinanzhen.png" @click="goClock" mode=""></image>
					<image src="/static/image/home/setting.png" @click="goSetting" mode=""></image>
					<image src="/static/image/home/messagepage.png" @click="goPage" mode=""></image>
				</div>
			 </div>
			 <div class="avatorbox">
				 <image class="avator" src="/static/image/home/avator.png" mode=""></image>
				 <view class="right">
				 	<text class="top">大地探险家</text>
					<div class="bottom">
						<image src="/static/image/home/rank.png" mode=""></image>
						<text>LV2</text>
					</div>
				 </view>
			 </div>
			 <div class="day">
				 <div class="item " :class="activeDay == 0 ? 'dayactive' : ''" @click="handleToday">
					 <text class="txt">今日行程</text>
					 <text class="time">03月05日</text>
				 </div>
				 <div class="item" :class="activeDay == 1 ? 'dayactive' : ''" @click="handleTomorrow" >
					 <text class="txt">明日行程</text>
					 <text class="time">03月05日</text>
				 </div>
				 <div class="more">
					 <text >更多</text>
					 <text >行程</text>
				 </div>
				  
			 </div>
			 <div class="toptips">
				 <text>地点：7个</text>
				 <text>步行：2h35min</text>
				 <text>车程：1h50min</text>
			 </div>
			 <div class="tipbox">
				 <qianStep v-if="this.options.length > 0" :options='options'>
				   <template v-slot:left='{index}'>
				     <view class="step_circle2"></view>
				     <view class="step_line" v-if="index != options.length-1"></view>
				   </template>
				   <template v-slot:right='{item}'>
				     <view class="setp_time" style="font-size:26rpx;">
				       <view>{{item.time}}</view>
				     </view>
				 	<view class="setp_content" >
				       <view>
				         {{item.content }}
				       </view>
				     </view>
				 		   
				   </template>
				 </qianStep>
				 <div v-else class="nodata">
					 <image src="../../static/image/home/home-nodata.png" mode=""></image>
					<text>躺平中～暂无行程</text>
				 </div>
				 <image v-if="hasMore" @click="handleMore" class="more" src="/static/image/home/more.png" mode=""></image>
				<div class="operate">
					<image @click="openShare"  src="/static/image/home/share.png" mode=""></image>
					<text class="line"></text>
					<image @click="openEditxingcheng"  src="/static/image/home/clock.png" mode=""></image>
					<text class="line"></text>
					<image @click="opentravelditu"  src="/static/image/home/map.png" mode=""></image>
				</div>
				
			 </div>
			 
			 <div class="contentbox">
				 <view class="tab-scroll_box">
				 	<!-- 选项卡类别列表 -->
				 	<view class="tab-scroll_item" v-for=" (item,index) in category" :key="index"  :class="{'active':isActive==index}" @click="chenked(index)">
				 			{{item.name}}
				 	</view>
				 </view>
				 <view class="showcontent">
					 
				 	<div class="showcontentitem" v-for="(item, index) in contentList" :key="index">
						<image class="left" :src="item.src" mode=""></image>
						<div class="right">
							<text class="title">
								{{item.title}}
							</text>
							<div class="subtitle">
								<text v-for="(itm) in item.list.slice(0, 3)">{{itm}}</text>
							</div>
							
							<div class="operatecontent">
								<image @click="handleStar(index, item.isstar)" v-if="!item.isstar" class="love" src="../../static/image/home/love.png" mode=""></image>
								<image @click="handleStar(index, item.isstar)" v-else class="love" src="../../static/image/home/loveactive.png" mode=""></image>
								
								<image @click="handleCollect(index, item.iscollect)" v-if="!item.iscollect" class="star" src="../../static/image/home/star.png" mode=""></image>
								<image @click="handleCollect(index, item.iscollect)" v-else class="star" src="../../static/image/home/staractive.png" mode=""></image>
								
								<image @click="handleShare(index, item)" class="fenxiang" src="../../static/image/home/fenxiang.png" mode=""></image>
							</div>
						</div>
					</div>
					<div class="line"></div>
				 </view>
			 </div>
			 
	<!-- 		<view class="">
				
			</view> -->
		    <!-- <qianStep :options='options'>
		      <template v-slot:left='{index}'>
		        <view class="step_circle2"></view>
		        <view class="step_line" v-if="index != options.length-1"></view>
		      </template>
		      <template v-slot:right='{item}'>
		        <view class="setp_time" style="font-size:26rpx;">
		          <view>{{item.time}}</view>
		        </view>
				<view class="setp_content" >
		          <view>
		            {{item.content }}
		          </view>
		        </view>
		   
		      </template>
		    </qianStep> -->
			
			
		  <!-- </view> -->
		  
		  <view class="" style="height: 190rpx;">
		  </view>
		<tabbar selected="0"></tabbar>
		
		<uni-popup ref="registerpopup"
		mask-background-color="rgba(0,0,0,0.5)"
		 borderRadius="32rpx 32rpx 32rpx 32rpx"
		 type="center" background-color="#fff" :mask-click="false">
			<div class="delbox">
				<div class="title">
					<text>提示</text>
				</div>
				<div class="desc" >
					<text>分享行程需要注册用户？</text>
				</div>
				<div class="footer">
					<button class="confirm" @click="cancelRegister">取消</button>
					<button @click="goRegister" class="cancel">注册</button>
				</div>
			</div>
		</uni-popup>
	</view>

	
</template>

<script>
	import qianStep from '../../components/ly-step/ly-step.vue'
	import tabbar from "../../components/tabbar/tabbar.vue";
	import  poster from '../../static/image/home/poster.png'
	export default {
		components: {
			tabbar: tabbar,
			qianStep: qianStep
		},
		data() {
			return {
				poster:poster,
				title: 'Hello',
				hasMore: true,
				      options: [
				        {
				          content: '进贤门',
				          time: '08:00-09:00',
				        },
				        {
				          content: '揭阳学宫',
				          time: '09:00-12:00',
				        },
				        {
				          content: '罗家老字号青果汁',
				          time: '12:00-14:00',
				        },
						{
						  content: '罗家老字号青果汁',
						  time: '12:00-14:00',
						},
				      ],
					  activeDay: 0,
					  category:[
					  	{
					  		id:1,
					  		name:'智能推荐',
					  	},
					  	{
					  		id:2,
					  		name:'国内',
					  	},
						{
							id:3,
							name:'出境',
						},
					],
					isActive: 0,
					contentList: [
						{
							src: poster,
							title: '深圳-福州-3日',
							list: [
								'D1：深圳-福州，三巷七坊',
								'D2：福州，平潭岛',
								'D3：福州-深圳，海坛古城'
							],
							isstar: true,
							iscollect: true,
						},
						{
							src: poster,
							title: '深圳-福州-3日',
							list: [
								'D1：深圳-福州，三巷七坊',
								'D2：福州，平潭岛',
								'D3：福州-深圳，海坛古城'
							],
							isstar: true,
							iscollect: false,
						},
						{
							src: poster,
							title: '深圳-福州-3日',
							list: [
								'D1：深圳-福州，三巷七坊',
								'D2：福州，平潭岛',
								'D3：福州-深圳，海坛古城'
							],
							isstar: false,
							iscollect: true,
						},
						{
							src: poster,
							title: '深圳-福州-3日',
							list: [
								'D1：深圳-福州，三巷七坊',
								'D2：福州，平潭岛',
								'D3：福州-深圳，海坛古城'
							],
							isstar: false,
							iscollect: false,
						}
					]
			}
		},
		methods: {
			handleStar(index, isstart) {
				this.contentList[index].isstar = !isstart
			},
			handleCollect(index, iscollect) {
				this.contentList[index].iscollect = !iscollect
			},
			handleShare() {
				this.$refs.registerpopup.open()
			},
			cancelRegister() {
				this.$refs.registerpopup.close()
			},
			goRegister() {
				this.$refs.registerpopup.close()
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			openShare() {
				uni.navigateTo({
					url: '/pages/sharePage/sharePage'
				})
			},
			openEditxingcheng() {
				uni.navigateTo({
					url: '/pages/createItinerary/createItinerary?type=clock'
				})
			},
			opentravelditu() {
				uni.navigateTo({
					url: '/pages/travel/travel'
				})
			},
			goPage() {
				uni.navigateTo({
					url: '/pages/InternalMessage/InternalMessage'
				})
			},
			goClock() {
				uni.navigateTo({
					url: '/pages/alarm/alarm'
				})
			},
			goSetting() {
				uni.navigateTo({
					url: '/pages/settings/settings'
				})
			},
			handleToday() {
				this.hasMore = true
				this.options = [
					{
					  content: '进贤门',
					  time: '08:00-09:00',
					},
					{
					  content: '揭阳学宫',
					  time: '09:00-12:00',
					},
					{
					  content: '罗家老字号青果汁',
					  time: '12:00-14:00',
					},
					{
					  content: '罗家老字号青果汁',
					  time: '12:00-14:00',
					},
				]
				this.activeDay = 0
			},
			handleMore() {
				uni.navigateTo({
					url: '/pages/travel/travel?type=list',
					
				})
				this.options = [
					...this.options,
					{
					  content: '进贤门',
					  time: '08:00-09:00',
					},
					{
					  content: '揭阳学宫',
					  time: '09:00-12:00',
					},
					{
					  content: '罗家老字号青果汁',
					  time: '12:00-14:00',
					},
					{
					  content: '罗家老字号青果汁',
					  time: '12:00-14:00',
					},
				]
				this.hasMore = false
				
			},
			handleTomorrow() {
				this.options = []
				this.activeDay = 1
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(index) {
				this.isActive = index;
				// this.scrollLeft = 0;
				// for (let i = 0; i < index - 1; i++) {
				// 	this.scrollLeft += this.category[i].width
				// };
			},
		}
	}
</script>

<style lang="less" scoped>
.step_circle2 {
  width: 18rpx;
  height: 18rpx;
  background: #FFFFFF;
  border: 2rpx solid #1076F2;
  border-radius: 50%;
  margin-left: 9rpx;
}
.step_line {
  width: 2rpx;
  height: 200%;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  flex: 1;
  border-left: 1rpx dotted #D9DFE6;
  }
  .setp_time {
	  color: #777777;
	  font-size: 28rpx;
	  line-height: 40rpx;
  }
  .setp_content {
	color: #080808;
	font-size: 28rpx;
	line-height: 40rpx;
  }
  
  .page {
	min-height: 421rpx;
	background-image: url(../../static/image/home/homebg.png);
	background-size: 100%;
	background-repeat: no-repeat;
	padding-top: 134rpx;
	.topBox {
		
		display: flex;
		justify-content: space-between;
		margin-bottom: 24rpx;
		align-items: center;
		padding: 0 36rpx 0 40rpx;
		.left {
			width: 126rpx;
			height: 38rpx;
		}
		.right {
			display: flex;
			image {
				width: 42rpx;
				height: 42rpx;
				margin-left: 32rpx;
			}
		}
	}
	.avatorbox {
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		padding: 0 40rpx 30rpx 40rpx;
		.avator {
			width: 112rpx;
			height: 112rpx;
			margin-right: 20rpx;
			border: 4rpx solid #FFFFFF;
			border-radius: 50%;
		}
		.right {
			display: flex;
			flex-direction: column;
			// align-items: center;
			.top {
				font-size: 34rpx;
				line-height: 48rpx;
				color: #221715;
				font-weight: bold;
			}
			.bottom {
				display: flex;
				align-items: center;
				// justify-content: center;
				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
				}
				text {
					color: #F5AD36;
					font-size: 18rpx;
				}
			}
		}
	}
	.day {
		display: flex;
		padding: 0 20rpx 20rpx 20rpx;
		.item {
			margin-right: 20rpx;
			width: 192rpx;
			height: 116rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.txt{
				font-weight: bold;
				font-size: 28rpx;
				color: #1A1A1A;
				line-height: 40rpx;
			}
			.time {
				font-size: 24rpx;
				color: #777777;
				line-height: 34rpx;
			}
		}
		.dayactive {
			background: linear-gradient( 270deg, #0187F5 0%, #2DCCC2 100%);
			.txt {
				color: #FFFFFF;
			}
			.time {
				color: #FFFFFF;
			}
		}
		.more {
			background: #FFFFFF;
			width: 136rpx;
			height: 116rpx;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text {
				font-size: 28rpx;
				color: #1A1A1A;
				line-height: 40rpx;
			}
		}
	}
	.toptips {
		background: linear-gradient( 270deg, #0187F5 0%, #2DCCC2 100%);
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		height: 80rpx;
		padding-bottom: 6rpx;
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		margin: 0 20rpx;
		text {
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 34rpx;
			margin-right: 32rpx;
		}
	}
	
	.tipbox {
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		position: relative;
		z-index: 1;
		top: -12rpx;
		
		min-height: 510rpx;
		margin: 0 20rpx 20rpx;
		// margin-top: -10rpx;
		padding: 40rpx 42rpx 0 42rpx;
		background-color: #FFFFFF;
		// background-color: red;
		.nodata {
			display: flex;
			flex-direction: column;
			image {
				width: 416rpx;
				height: 346rpx;
				margin: 0 auto;
				margin-top: 22rpx;
				margin-bottom: 32rpx;
			}
			text {
				margin: 0 auto;
				color: #999999;
				font-size: 28rpx;
				line-height: 40rpx;
			}
		}
		.more {
			width: 24rpx;
			height: 22rpx;
			position: absolute;
			left: 50%;
			bottom: 20rpx;
			margin-left: -12rpx;
		}
		.operate {
			width: 72rpx;
			height: 268rpx;
			background: #F3F5F7;
			border-radius: 36rpx;
			position: absolute;
			right: 22rpx;
			bottom: 20rpx;
			display: flex;
			padding: 16rpx 0;
			flex-direction: column;
			// align-items: s;
			align-items: center;
			justify-content: space-around;
			image {
				cursor: pointer;
				width: 36rpx;
				height: 36rpx;
				// width: auto;
				// min-height: 36rpx;
			}
			.line {
				width: 48rpx;
				height: 1rpx;
				background-color: #E5E5E5;
			}
		}
	}
	.contentbox {
		margin: 0 20rpx;
		background-color: #fff;
		padding: 30rpx 20rpx 20rpx 20rpx;
		.tab-scroll_box{
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			box-sizing: border-box;
			.tab-scroll_item{
				line-height: 40rpx;
				margin-right: 80rpx;
				flex-shrink: 0;
				padding-bottom:10px;
				display: flex;
				justify-content: center;
				color: #121212;
				font-size: 30rpx;
				padding-top: 10px;
			}
			.active {
				position: relative;
				// color: #ff0000;
				font-weight: bold;
				font-weight: 600;
				z-index: 2;
				
			}
			.active::after {
				content: "";
				position: absolute;
				width: 60rpx;
				height: 12rpx;
				// background-color: #ff0000;
				background: linear-gradient( 270deg, #FFFFFF 0%, #017DFF 100%);
				left: 0px;
				right: 0px;
				bottom: 14rpx;
				margin: auto;
			}
		}
		.showcontent {
			.showcontentitem {
				position: relative;
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #F3F5F7;
				.left {
					width: 240rpx;
					height: 240rpx;
					margin-right: 20rpx;
					border-radius: 16rpx;
				}
				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					.title {
						color: #221715;
						font-size: 28rpx;
						line-height: 40rpx;
						// margin-right: 20rpx;
					}
					.subtitle {
						display: flex;
						flex-direction: column;
						color: #777777;
						font-size: 28rpx;
						line-height: 40rpx;
						margin-top: 20rpx;
					}
					.operatecontent {
						position: absolute;
						top: 8rpx;
						right: 4rpx;
						display: flex;
						align-items: center;
						.love {
							width: 28rpx;
							height: 26rpx;
							margin-right: 22rpx;
						}
						.star {
							width: 28rpx;
							height: 26rpx;
							margin-right: 18rpx;
						}
						.fenxiang {
							width: 32rpx;
							height: 26rpx;
						}
					}
				}
			}
			// .line {
			// 	background: #F3F5F7;
			// 	width: 100%;
			// 	height: 2rpx;
			// 	// padding:;
			// }
		}
	}
  }
  
  
  .delbox {
  	width: 630rpx;
  	height: 320rpx;
  	background: #FFFFFF;
  	border-radius: 32rpx;
  	padding: 40rpx 40rpx 30rpx 40rpx;
  	box-sizing: border-box;
  	display: flex;
  	align-items: center;
  	// justify-content: center;
  	flex-direction: column;
  	.title {
  		margin-bottom: 40rpx;
  		text {
  			font-weight: bold;
  			font-size: 36rpx;
  			color: #1A1A1A;
  			line-height: 50rpx;
  		}
  	}
  	.desc {
  		margin-bottom: 40rpx;
  		text {
  			font-weight: 400;
  			font-size: 28rpx;
  			color: #1A1A1A;
  			line-height: 40rpx;
  		}
  	}
  	.footer {
  		width: 100%;
  		// background-color: red;
  		display: flex;
  		justify-content: space-between;
  		
  		.confirm {
  			width: 230rpx;
  			height: 80rpx;
  			border-radius: 40rpx;
  			border: 2rpx solid #D9D9D9;
  			font-weight: bold;
  			font-size: 30rpx;
  			color: #1A1A1A;
  			line-height: 42rpx;
  			box-sizing: border-box;
  			display: flex;
  			justify-content: center;
  			align-items: center;
  		}
  		.cancel {
  			width: 230rpx;
  			height: 80rpx;
  			background: #006FF6;
  			border-radius: 40rpx;
  			font-weight: bold;
  			font-size: 30rpx;
  			color: #FFFFFF;
  			line-height: 40rpx;
  			box-sizing: border-box;
  			display: flex;
  			justify-content: center;
  			align-items: center;
  		}
  	}
  }
</style>
